<template>
  <el-dialog
    title="提示"
    v-model="dialogVisible"
    width="800px"
    :before-close="handleClose"
  >
    <div class="json-content">
      <dl>
        <dt>json1</dt>
        <dd>
          <pre>{{ initJson(json1) }}</pre>
        </dd>
      </dl>
      <dl>
        <dt>json2</dt>
        <dd>
          <pre>{{ initJson(json2) }}</pre>
        </dd>
      </dl>
    </div>
    <span slot="footer" class="dialog-json-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script setup lang="ts">
const dialogVisible = defineModel({ default: false });
defineProps<{
  json1: any;
  json2: any;
}>();
function initJson(json: any) {
  //   json = JSON.parse(json);
  return JSON.stringify(json, null, 2);
}
const handleClose = () => {
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.dialog-json-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.json-content {
  display: flex;
  overflow: hidden;
  max-height: 66vh;
  overflow-y: auto;
  dl {
    width: 50%;

    padding: 10px;
    dt {
      font-weight: 800;
      font-size: 20px;
      margin-bottom: 6px;
    }
    dd {
      border: 1px solid red;
      overflow-x: auto;
    }
  }
}
</style>
